<template>
    <div>
        <div class="toolbar">
            <el-form :inline="true"  class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchGoodsName"  placeholder="店铺类别"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="$store.dispatch('getGoodsTypeList',{goodsTypeName:searchGoodsName})">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button  type="success" @click="goodsTypeVisible=true">添加商品类别</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                v-loading="$store.state.load"
                :data="$store.state.goods.goodsTypeList"
                style="width: 100%">
            <el-table-column
                    label="ID"
                    width="200">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row._id}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="上传时间"
                    width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.createTime |date }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="修改时间"
                    width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.upTime |date }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品类别名称"
                    width="180">
                <template slot-scope="scope">
                    {{scope.row.goodsTypeName}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">

                    <el-button
                            size="mini"
                            type="danger"
                            @click="$store.dispatch('deleteGoodsType',scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <goods-type-dia-log v-if="goodsTypeVisible" :goodsTypeVisible.sync="goodsTypeVisible"></goods-type-dia-log>

        <pageInfo action-name="getGoodsTypeList" :params="{goodsTypeName:searchGoodsName}"></pageInfo>
<!--        :params="{shopTypeName:searchShopName}"-->
    </div>
</template>

<script>
    export default {
        name: "GoodsTypeList",
        components:{
            GoodsTypeDiaLog:()=>import("@/components/DiaLogs/goodsDiaLog.vue")
        },
        data(){
            return{
                searchGoodsName:"",
                goodsTypeVisible:false
            }
        },

    }
</script>

<style scoped>

</style>